<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change Password</title>
<script src="references/js/jquery-2.1.0.min.js"></script>
<script>
	$(function() {

		$("#password").attr("required", "");
		$("#oldPassword").attr("required", "");

	});
	function checkPass() {
		//Store the password field objects into variables ...
		var pass1 = document.getElementById('password');
		var pass2 = document.getElementById('re-password');
		//Store the Confimation Message Object ...
		var message = document.getElementById('confirmMessage');
		//Set the colors we will be using ...
		var goodColor = "#66cc66";
		var badColor = "#ff6666";
		//Compare the values in the password field 
		//and the confirmation field
		if (pass1.value == pass2.value) {
			//The passwords match. 
			//Set the color to the good color and inform
			//the user that they have entered the correct password 
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "Passwords Match!"
			return true;
		} else {
			//The passwords do not match.
			//Set the color to the bad color and
			//notify the user.
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = "Passwords Do Not Match!"
			return false;
		}
	}
</script>
</head>
<body>
	<tiles:insertTemplate template="/pages/masterpage/masterPage.jsp">

		<tiles:putAttribute name="body">
			<logic:empty name="username" scope="session">
				<logic:forward name="home" />
			</logic:empty>
			
			<div class="col-lg-6 col-lg-offset-3">
			<div class="panel-group" id="accordion">
  <div class="panel panel-danger">
    <div class="panel-heading">
      <h4 class="panel-title">
        Change Password
		
	  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
         <i class="fa fa-angle-double-down" style="float:right"></i>
        </a>
	
      </h4>
	 
    </div>
    <div id="collapseThree" class="panel-collapse collapse in">
      <div class="panel-body">
			<html:form action="/changePassword" method="post"
				onsubmit="return checkPass();">
		<p style="text-align: center">Old Password:</p> <html:password property="oldPassword" styleClass="form-control"
					styleId="oldPassword"></html:password>
				<br>
		<p style="text-align: center">New Password:</p> <html:password property="newPassword" styleClass="form-control" styleId="password"></html:password>
				<br>
		<p style="text-align: center">Re-type Password:</p> <input type="password" id="re-password" class="form-control" required
					onkeyup="checkPass(); return false;" />
				<span id="confirmMessage" class="confirmMessage"></span>
				<br>
				<p style="text-align: center"><html:submit styleClass="btn btn-primary">Change</html:submit></p>
			</html:form>
		
			<logic:notEmpty name="info">
				<bean:write name="info" />
				<br>
			</logic:notEmpty>
      </div>
    </div></div>
	
  </div>
	</div>
			
			

			<html:link action="/goHome">Home</html:link>
		</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>